<template>
	<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">


		<!-- <el-button type="primary" :icon="Search">Search</el-button> -->

		<el-tab-pane label="全部" name="first">
			<div class="big">
				<br>
				<div class="mb16">
					<button class="gjsx" @click="showClick">高级筛选 <img src="../img/高级筛选.png"
							style="height: 15px;" /></button>
					<div class="ml1">
						<el-input type="text" maxlength="20" placeholder="输入项目名称/房号/费用编号" class="el-input" />
						<el-button type="primary"
							style="height: 40px; background-color: white;color: black; border: none;">搜索</el-button>
					</div>
				</div>
				<div class="xiala" v-show="showXiala">
					<form>
						<el-form-item label="房屋/车位/车辆" class="xz">
							<el-select placeholder="全部">
							</el-select>
						</el-form-item>
						<el-form-item label="计费类型" class="xz">
							<el-select placeholder="请选择计费类型">
							</el-select>
						</el-form-item>
						<el-form-item label="计费项目" class="xz">
							<el-select placeholder="全部">
							</el-select>
						</el-form-item>

						<p style="width: 500px; height: 1px;">&nbsp;</p>
						<el-form-item label="费用起止时间" class="xz" style="width: 800px;">
							<el-form-item>
								<el-col :span="11">
									<el-date-picker type="date" placeholder="开始" style="width: 100%" />
								</el-col>
								<el-col :span="2" class="text-center">
									<span class="text-gray-500">至</span>
								</el-col>
								<el-col :span="11">
									<el-date-picker placeholder="结束" style="width: 100%" />
								</el-col>
							</el-form-item>
						</el-form-item>
						<el-form-item label="所属月" class="xz" style="width: 800px;">
							<el-form-item>
								<el-col :span="11">
									<el-date-picker type="date" placeholder="开始" style="width: 100%" />
								</el-col>
								<el-col :span="2" class="text-center">
									<span class="text-gray-500">至</span>
								</el-col>
								<el-col :span="11">
									<el-date-picker placeholder="结束" style="width: 100%" />
								</el-col>
							</el-form-item>
						</el-form-item>
						<el-form-item label="生成时间" class="xz" style="width: 500px;">
							<el-form-item>
								<el-col :span="11">
									<el-date-picker type="date" placeholder="开始" style="width: 100%" />
								</el-col>
								<el-col :span="2" class="text-center">
									<span class="text-gray-500">至</span>
								</el-col>
								<el-col :span="11">
									<el-date-picker placeholder="结束" style="width: 100%" />
								</el-col>
							</el-form-item>
						</el-form-item>
						<el-form-item label="支付方式" class="xz">
							<el-select placeholder="全部">
							</el-select>
						</el-form-item>
						<el-form-item label="支付状态" class="xz" style="width: 800px;">
							<el-select placeholder="请选择支付状态" style="width: 200px;right: 5px;">
							</el-select>
						</el-form-item>


						<el-form-item label="支付时间" class="xz" style="width: 800px;">
							<el-form-item>
								<el-col :span="11">
									<el-date-picker type="date" placeholder="开始" style="width: 100%" />
								</el-col>
								<el-col :span="2" class="text-center">
									<span class="text-gray-500">至</span>
								</el-col>
								<el-col :span="11">
									<el-date-picker placeholder="结束" style="width: 100%" />
								</el-col>
							</el-form-item>

						</el-form-item>
						<el-button class="btn1">重置</el-button><el-button class="btn2">查询</el-button>
					</form>
					<br />
				</div>
				<div class="all">
					<br />
					<router-link to="/FeiYong/chuangJianJiFeiXiangMu"><el-button type="primary"
							class="add">生成费用</el-button><br /></router-link>

					<br />
					<el-table :data="data.FeiYong" style="width: 100%" v-loading="loading">
						<el-table-column fixed prop="jifeiname" label="计费项目" width="150" />
						<el-table-column prop="number" label="费用编号" width="200" />
						<el-table-column prop="suoshu" label="账单所属" width="200" />
						<el-table-column prop="minaji" label="面积" width="160" />
						<el-table-column prop="sctime" label="费用所属月" width="180" />
						<el-table-column prop="jine" label="金额" width="120" />
						<el-table-column prop="yingfujine" label="应付金额" width="120" />
						<el-table-column prop="state" label="状态" width="120" />
						<el-table-column prop="czr" label="生成操作人" width="120" />
						<el-table-column prop="skr" label="收款操作人" width="120" />
						<el-table-column fixed="right" label="操作" min-width="120">
							<template #default>
								<el-button link type="primary" size="small" @click="tableClick">
									查看
								</el-button>
								<el-button link type="primary" size="small">
									<el-dropdown>
										<span class="el-dropdown-link">
											...
											<el-icon class="el-icon--right">
												<arrow-down />
											</el-icon>
										</span>
										<template #dropdown>
											<el-dropdown-menu>
												<el-dropdown-item>Action 1</el-dropdown-item>
												<el-dropdown-item>Action 2</el-dropdown-item>
												<el-dropdown-item>Action 3</el-dropdown-item>
											</el-dropdown-menu>
										</template>
									</el-dropdown>
								</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div class="demo-pagination-block">
					<el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
						:page-sizes="[20, 30, 40, 50]" :size="size" :disabled="disabled" :background="background"
						layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
						@current-change="handleCurrentChange" />
				</div>
			</div>
		</el-tab-pane>

		<el-tab-pane label="待审核" name="second">
			<shenHeVue></shenHeVue>
		</el-tab-pane>

		<el-tab-pane label="未支付" name="third">
			<weiZhiFuVue></weiZhiFuVue>
		</el-tab-pane>

		<el-tab-pane label="已支付" name="fourth">
			<yiZhiFuVue></yiZhiFuVue>
		</el-tab-pane>

		<el-tab-pane label="已退款" name="Five">
			<yiZhiFuVue></yiZhiFuVue>
		</el-tab-pane>





	</el-tabs>
</template>



<script lang="ts" setup>
	import { ref, reactive, onMounted } from 'vue'
	import type { TabsPaneContext } from 'element-plus'
	import { ArrowDown } from '@element-plus/icons-vue'
	import shenHeVue from './shenHe.vue';
	import weiZhiFuVue from './weiZhiFu.vue';
	import yiZhiFuVue from './yiZhiFu.vue';
	import $http from '../router/AxiosApi.js';
	import type { ComponentSize } from 'element-plus'
	// import { Search } from '@element-plus/icons-vue'
	const activeName = ref('first')

	const loading = ref(true)
	setTimeout(() => {
		loading.value = false;
	}, 2000);

	const handleClick = (tab : TabsPaneContext, event : Event) => {
		console.log(tab, event)
	}

	const tableClick = () => {
		console.log('click')
	}


	const data = reactive({
		FeiYong: []
	})
	const form = reactive({
		billingltems_name: '',
		fybh: '',
		zdss: '',
		mj: '',
		jine: '',
		yingfujine: '',
		fyzt: '',
		scsj: '',
		scczr: '',
		skczr: ''
	})
	onMounted(() => {
		loadFeiYong(page, pageSize)
	})
	const page = ref(1)
	const pageSize = ref(12)
	const total = ref(0)
	const size = ref<ComponentSize>('default')
	const currentPage4 = ref(0)
	const pageSize4 = ref(0)
	const background = ref(false)
	const disabled = ref(false)
	const inputValue = ref('');
	const handleSizeChange = (val : number) => {
		pageSize.value = val;
		loadFeiYong(page, pageSize)
	}
	const handleCurrentChange = (val : number) => {
		pageSize.value = val;
		loadFeiYong(page, pageSize)
	}
	const loadFeiYong = (costpage, size) => {
		$http.post(`FeiYong/selectFeiYongAll?currentPage=${page.value}&pageSize=${size.value}`, form).then((res) => {
			data.FeiYong = res.data.data.list
			console.log(data.FeiYong)
			total.value = res.data.data.total
			currentPage4.value = res.data.data.pageNum
			pageSize4.value = res.data.data.pageSize
		})
	}


	const showXiala = ref(false);


	const showClick = () => {
		console.log("aaa");
		showXiala.value = !showXiala.value;
	};
</script>

<style scoped>
	.add {
		position: relative;
		right: 600px;
		top: 0px;
		background-color: #00C36D;
		height: 40px;
		width: 100px;
		border: 0px solid;
	}

	.all {
		width: 1370px;
		border: 2px solid gainsboro;
		height: 650px;
		border-radius: 10px;
		background-color: white;

	}





	.xiala {
		background-color: white;
		width: 1340px;
		height: 420px;
		overflow: auto;
		padding: 15px;
		margin-bottom: 10px;
		border: 2px solid gainsboro;
		border-radius: 10px;
		font-size: 16px;
	}

	.xz {
		width: 300px;
		float: left;
		margin-bottom: 0;
		margin-right: 32px;
		height: 56px;
		align-items: center;
		text-align: left;
	}

	.text-center {
		text-align: center;
	}

	.btn1 {
		position: relative;
		bottom: -330px;
		right: 1000px;
		width: 100px;
		height: 40px;
		color: #7e8081;
		background-color: #fafafa;
		border: none;
		font-size: 14px;
		padding: 10px;
	}

	.btn2 {
		position: relative;
		bottom: -330px;
		right: 980px;
		width: 100px;
		height: 40px;
		color: #fff;
		background-color: #00c36d;
		border-color: #00c36d;
		font-size: 14px;
	}

	.gjsx {
		background-color: white;
		padding: 10px 15px;
		color: #00C36D;
		width: 146px;
		height: 40px;
		font-size: 18px;
	}

	.mb16 {
		margin-bottom: 16px;
		display: -webkit-box;
		display: flex;
		justify-content: flex-end;
		width: 1315px;
	}

	.ml1 {
		width: 300px;
		border: none;
		margin-left: 10px;
		display: inline-table;
	}

	.el-input {
		width: 200px;
	}

	.big {
		background-color: #f5f5f5;
	}

	.example-showcase .el-dropdown-link {
		cursor: pointer;
		color: var(--el-color-primary);
		display: flex;
		align-items: center;
	}

	.example-showcase .el-loading-mask {
		z-index: 1;
	}
</style>